<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>后台主页</title>
    <style>
        .el-table .warning-row {
            background: oldlace;
        }

        .el-table .success-row {
            background: #f0f9eb;
        }
        .el-header, .el-footer {
            background-color: #B3C0D1;
            color: #333;
            text-align: center;
            line-height: 60px;
        }
    </style>

</head>
<body>
<div id="app">
    <el-container>
        <el-header  style="font-size: 35px">
            湖工二手电子商品网站
            (联系电话:18727563655)
        </el-header>
        <el-main>
            <!--    导航栏-->
            <el-tabs type="border-card">
                <el-tab-pane label="商品管理">
                    <!--商品管理-->
                    <div>
                        <!--    查询表单-->
                        <el-form :inline="true" :model="formInline" class="demo-form-inline">
                            <el-form-item label="商品类型:">
                                <el-select v-model="formInline.tid" placeholder="商品类型">
                                    <el-option  v-for="type in types"  :label="type.tname" :value="type.tid"></el-option>
                                </el-select>
                            </el-form-item>
                            <el-form-item label="商品名称:">
                                <el-input v-model="formInline.pname" placeholder="商品名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="onSubmit">查询</el-button>
                            </el-form-item>
                        </el-form>

                        <!--    批量删除和添加-->
                        <el-row>
                            <el-button type="danger" @click="selectByPids" plain>批量删除</el-button>
                            <el-button type="primary" @click="dialogVisible = true" plain>新增商品</el-button>
                        </el-row>

                        <!--    对话框表单添加商品-->
                        <el-dialog
                                title="提示"
                                :visible.sync="dialogVisible"
                                width="30%">


                            <!--        新增商品提交表单-->
                            <el-form ref="form" :model="form" label-width="80px">
                                <el-form-item label="商品名称">
                                    <el-input v-model="form.pname"></el-input>
                                </el-form-item>
                                <el-form-item label="商品类型">
                                    <el-select v-model="form.tid" placeholder="商品类型">
                                        <el-option  v-for="type in types"  :label="type.tname" :value="type.tid"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="价格">
                                    <el-input v-model="form.price"></el-input>
                                </el-form-item>
                                <el-form-item label="数量">
                                    <el-input v-model="form.pnumber"></el-input>
                                </el-form-item>
                                <!--            图片上传功能-->
                                <el-form-item label="商品图片">
                                    <el-upload
                                            class="upload-demo"
                                            action="http://localhost/pages/images/"
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :file-list="fileList"
                                            list-type="picture">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="上架时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="form.pdate" style="width: 100%;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="商品详情">
                                    <el-input type="textarea" v-model="form.pcontent"></el-input>
                                </el-form-item>
                            </el-form>



                            <span slot="footer" class="dialog-footer">
            <el-button @click="dialogVisible = false">取 消</el-button>
            <el-button type="primary"  @click="addInfo">添加商品</el-button>
        </span>
                        </el-dialog>

                        <!--    表格-->
                        <template>
                            <el-table
                                    :data="tableData"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName"
                                    @selection-change="handleSelectionChange">
                                <el-table-column
                                        type="selection"
                                        width="55">
                                </el-table-column>
                                <el-table-column
                                        type="index"
                                        width="50">
                                </el-table-column>
                                <el-table-column
                                        label="外观"
                                        align="center">
                                    <!--                解决在表格中插入图片的功能-->
                                    <template slot-scope="scope">
                                        <el-popover placement="top-start" title="" trigger="hover">
                                            <!--                        放大后的大图-->
                                            <img :src="scope.row.pimage" alt="" style="width: 300px;height: 300px">
                                            <!--                        原始的小图-->
                                            <img slot="reference" :src="scope.row.pimage" style="width: 50px;height: 50px">
                                        </el-popover>
                                    </template>
                                </el-table-column>
                                <el-table-column
                                        prop="pname"
                                        label="名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pcontent"
                                        label="详情"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="price"
                                        label="价格"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pnumber"
                                        label="数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pdate"
                                        align="center"
                                        label="上架时间">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="操作">
                                    <!--                    可以使用 scope.row.xxx  获取具体字段的值-->
                                    <template slot-scope="scope">
                                        <el-button type="primary" @click="edit(scope.row)">修改</el-button>
                                        <el-button type="danger" @click="deleteByPid(scope.row.pid)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>

                        <!--    对话框表单修改商品-->
                        <el-dialog
                                title="提示"
                                :visible.sync="dialogVisibleEdit"
                                width="30%">
                            <!--        修改商品信息表单-->
                            <el-form ref="form" :model="editform" label-width="80px">
                                <el-form-item label="商品名称">
                                    <el-input v-model="editform.pname"></el-input>
                                </el-form-item>
                                <el-form-item label="商品类型">
                                    <el-select v-model="editform.tid" placeholder="商品类型">
                                        <el-option  v-for="type in types"  :label="type.tname" :value="type.tid"></el-option>
                                    </el-select>
                                </el-form-item>
                                <el-form-item label="价格">
                                    <el-input v-model="editform.price"></el-input>
                                </el-form-item>
                                <el-form-item label="数量">
                                    <el-input v-model="editform.pnumber"></el-input>
                                </el-form-item>
                                <!--            图片上传功能-->
                                <el-form-item label="商品图片">
                                    <el-upload
                                            class="upload-demo"
                                            action="http://localhost/pages/images/"
                                            :on-preview="handlePreview"
                                            :on-remove="handleRemove"
                                            :file-list="fileList"
                                            list-type="picture">
                                        <el-button size="small" type="primary">点击上传</el-button>
                                        <div slot="tip" class="el-upload__tip">只能上传jpg/png文件，且不超过500kb</div>
                                    </el-upload>
                                </el-form-item>
                                <el-form-item label="上架时间">
                                    <el-col :span="12">
                                        <el-date-picker type="date" placeholder="选择日期" v-model="editform.pdate" style="width: 100%;"></el-date-picker>
                                    </el-col>
                                </el-form-item>
                                <el-form-item label="商品详情">
                                    <el-input type="textarea" v-model="editform.pcontent"></el-input>
                                </el-form-item>
                            </el-form>
                            <span slot="footer" class="dialog-footer">
                            <el-button @click="dialogVisibleEdit = false">取 消</el-button><el-button type="primary"  @click="editbutton">修改</el-button>
                            </span>
                        </el-dialog>

                        <!--    分页工具条-->
                        <el-pagination
                                @size-change="handleSizeChange"
                                @current-change="handleCurrentChange"
                                :current-page="currentPage"
                                :page-sizes="[4, 6, 8, 10]"
                                :page-size="pageSize"
                                layout="total, sizes, prev, pager, next, jumper"
                                :total="totalCount">
                        </el-pagination>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="类型管理">
                    <!--类型管理-->
                    <div>
                        <!--    添加表单-->
                        <el-form :inline="true" :model="formType" class="demo-form-inline">
                            <el-form-item label="商品类型名称:">
                                <el-input v-model="formType.tname" placeholder="类型名称"></el-input>
                            </el-form-item>
                            <el-form-item>
                                <el-button type="primary" @click="addType">添加</el-button>
                            </el-form-item>
                        </el-form>
                        <!--    表格-->
                        <template>
                            <el-table
                                    :data="types"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        prop="tname"
                                        label="类型名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        align="center"
                                        label="新类型名称">
                                    <template slot-scope="scope">
                                        <el-input v-model="scope.row.tname"></el-input>
                                    </template>
                                </el-table-column>
                                <!--                    可以使用 scope.row.xxx  获取具体字段的值-->
                                <el-table-column
                                        align="center"
                                        label="操作">
                                    <template slot-scope="scope">
                                        <el-button type="primary" @click="typeEdit(scope.row)">修改</el-button>
                                        <el-button type="danger" @click="deleteByTid(scope.row.tid)">删除</el-button>
                                    </template>
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="订单管理">
                    <div>
                        <!--    订单管理表格-->
                        <template>
                            <el-table
                                    :data="orders"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        label="订单状态"
                                        align="center">
                                    <el-button type="success" icon="el-icon-check" circle></el-button>
                                </el-table-column>
                                <el-table-column
                                        prop="oid"
                                        label="点单编号"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="cid"
                                        label="买家编号"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="pname"
                                        label="商品名称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="onumber"
                                        label="购买数量"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="money"
                                        label="总计金额"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="odate"
                                        label="购买日期"
                                        align="center">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="用户管理">
                    <div>
                        <!--    用户管理表格-->
                        <template>
                            <el-table
                                    :data="clients"
                                    style="width: 100%"
                                    :row-class-name="tableRowClassName">
                                <el-table-column
                                        label="用户状态"
                                        align="center">
                                    <el-button type="success" icon="el-icon-check" circle></el-button>
                                </el-table-column>
                                <el-table-column
                                        prop="cid"
                                        label="用户编号"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="username"
                                        label="昵称"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        label="用户密码"
                                        align="center">
                                    ******
                                </el-table-column>
                                <el-table-column
                                        prop="phone"
                                        label="电话号码"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="sex"
                                        label="性别"
                                        align="center">
                                </el-table-column>
                                <el-table-column
                                        prop="text"
                                        label="详情"
                                        align="center">
                                </el-table-column>
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs></el-main>
        <el-footer>
            (@湖北工程学院)-(@软件工程)-@(021321752308)-(@李澳)-(@2022-06-14)
        </el-footer>
    </el-container>




</div>
<script src="../js/vue.js"></script>
<script src="../js/element-ui/lib/index.js"></script>
<script src="../js/axios.js"></script>
<script src="../js/axios.min.js"></script>
<link rel="stylesheet" href="../js/element-ui/lib/theme-chalk/index.css">
<script>
    new Vue({
        el : "#app",
        data() {
            return {
                //添加商品类型
                formType:{
                    tid:'',
                    tname:''
                },
                //分页工具条
                currentPage: 1,
                pageSize:4,
                //添加商品提交表单数据
                form: {
                    pcontent: '',
                    pname: '',
                    price: '',
                    pimage: 'images/demo.jpg',
                    pnumber: '',
                    tid: '',
                    pdate: ''
                },
                //修改商品提交表单数据
                editform:{
                    pid:'',
                    pcontent: '',
                    pname: '',
                    price: '',
                    pimage: 'images/demo.jpg',
                    pnumber: '',
                    tid: '',
                    pdate: ''
                },
                //添加对话框显示
                dialogVisible: false,
                //修改对话框显示
                dialogVisibleEdit : false,
                // 表格数据
                tableData: [],
                //订单数据
                orders:[],
                //用户数据
                clients:[],
                multipleSelection: [],
                // 表单数据
                formInline: {},
                types : [],
                //上传图片
                fileList: [{name: 'demo.jpg', url: 'http://localhost/pages/images/demo.jpg'}],
                //被选中的id数组
                selectedIds:[],
                totalCount:100
            }
        },
        // 当页面加载完成后
        mounted() {
            this.selectAll();
            this.selectOrders();
            this.selectClients();
        },
        methods: {
            selectAll(){
                var _this = this;
                axios({
                    method:"post",
                    url:"http://localhost:80/infos/page/"+_this.currentPage+"/"+_this.pageSize,
                    data:_this.formInline
                }).then(function (resp) {
                    _this.tableData = resp.data.data.rows;
                    _this.totalCount = resp.data.data.totalCount;
                }),
                    axios({
                        method:"get",
                        url:"http://localhost:80/types"
                    }).then(function (resp) {
                        _this.types = resp.data.data;
                    })
            },
            //查询全部订单信息
            selectOrders(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:80/orders"
                }).then(function (resp) {
                    _this.orders = resp.data.data;
                })
            },
            //查询全部用户信息
            selectClients(){
                var _this = this;
                axios({
                    method:"get",
                    url:"http://localhost:80/clients"
                }).then(function (resp) {
                    _this.clients = resp.data.data;
                })
            },
            //添加商品类型
            addType(){
                var _this = this;
                //发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:80/types",
                    data:_this.formType
                }).then(function (resp) {
                    if(resp.data.code == 20011){
                        // 弹出消息提示
                        _this.$message({
                            message:'添加成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'添加失败!',
                            type:'error'
                        });
                    }
                })
            },
            tableRowClassName({row, rowIndex}) {
                if (rowIndex === 1) {
                    return 'warning-row';
                } else if (rowIndex === 3) {
                    return 'success-row';
                }
                return '';
            },
            //修改商品信息
            edit(val){
                var _this = this;
                _this.dialogVisibleEdit = true;
                _this.editform = val;
            },
            editbutton(){
                var _this = this;
                axios({
                    method:"put",
                    url:"http://localhost:80/infos",
                    data:_this.editform
                }).then(function (resp) {
                    _this.dialogVisibleEdit = false;
                    if(resp.data.code == 20031){
                        // 弹出消息提示
                        _this.$message({
                            message:'修改成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'修改失败!',
                            type:'error'
                        });
                    }
                })
            },
            //复选框执行的函数
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            //表单查询
            onSubmit() {
                this.selectAll();
            },
            //对话框添加商品表单
            addInfo(){
                var _this = this;
                //发送ajax请求，添加数据
                axios({
                    method:"post",
                    url:"http://localhost:80/infos",
                    data:_this.form
                }).then(function (resp) {
                    _this.dialogVisible = false;
                    if(resp.data.code == 20011){
                        // 弹出消息提示
                        _this.$message({
                            message:'添加成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'添加失败!',
                            type:'error'
                        });
                    }
                })
            },
            //类型修改方法
            typeEdit(val){
                var _this = this;
                axios({
                    method:"put",
                    url:"http://localhost:80/types",
                    data:val
                }).then(function (resp) {
                    if(resp.data.code == 20031){
                        // 弹出消息提示
                        _this.$message({
                            message:'修改成功!',
                            type:'success'
                        });
                        _this.selectAll();
                    }
                    else {
                        _this.$message({
                            message:'修改失败!',
                            type:'error'
                        });
                    }
                })
            },
            //上传图片的两个方法
            handleRemove(file, fileList) {
                console.log(file, fileList);
            },
            handlePreview(file) {
                console.log(file);
            },
            //根据pid删除商品
            deleteByPid(val){
                var _this = this;
                this.$confirm('此操作将删除选中的商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    axios({
                        method:"delete",
                        url:"http://localhost:80/infos/"+val
                    }).then(function (resp) {
                        if(resp.data.code == 20031){
                            // 弹出消息提示
                            _this.$message({
                                message:'删除成功!',
                                type:'success'
                            });
                            _this.selectAll();
                        }
                        else {
                            _this.$message({
                                message:'删除失败!',
                                type:'error'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            //根据tid删除商品类别
            deleteByTid(val){
                var _this = this;
                this.$confirm('此操作将删除选中的商品类型, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    axios({
                        method:"delete",
                        url:"http://localhost:80/types/"+val
                    }).then(function (resp) {
                        if(resp.data.code == 20031){
                            // 弹出消息提示
                            _this.$message({
                                message:'删除成功!',
                                type:'success'
                            });
                            _this.selectAll();
                        }
                        else {
                            _this.$message({
                                message:'删除失败!',
                                type:'error'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });
            },
            // 分页工具条
            handleSizeChange(val) {
                //console.log(`每页 ${val} 条`);
                this.pageSize = val;
                this.selectAll();
            },
            handleCurrentChange(val) {
                //console.log(`当前页: ${val}`);
                this.currentPage = val;
                this.selectAll();
            },
            // 批量删除
            selectByPids(){
                //1、创建id数据，从this.multipleSelection = val;中获取
                for (let i = 0; i < this.multipleSelection.length; i++) {
                    let ele = this.multipleSelection[i];
                    this.selectedIds[i] = ele.pid;
                }
                var _this = this;
                //发送ajax请求，添加数据


                this.$confirm('此操作将删除全部选中的商品, 是否继续?', '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning',
                    center: true
                }).then(() => {
                    axios({
                        method:"delete",
                        url:"http://localhost:80/infos",
                        data:_this.selectedIds
                    }).then(function (resp) {
                        if(resp.data.code == 20031){
                            // 弹出消息提示
                            _this.$message({
                                message:'删除成功!',
                                type:'success'
                            });
                            _this.selectAll();
                        }
                        else {
                            _this.$message({
                                message:'删除失败!',
                                type:'error'
                            });
                        }
                    })
                }).catch(() => {
                    this.$message({
                        type: 'info',
                        message: '已取消删除'
                    });
                });


            }
        }
    })
</script>
</body>
</html>